<template>
  <div class="app-container" v-if="authorityHandle(428)">
    <!-- 创建 roll 房 -->
    <k-button
      v-if="authorityHandle(429)"
      class="top-btn"
      value="创建VIP"
      @click.native="creatRedPocketDialog"
    />
    <el-switch
     v-if="authorityHandle(429)"
      v-model="activityStatus"
      active-color="#3b425d"
      inactive-color="#E9EBF2"
      active-text="开"
      inactive-text="关"
      @change="updateActStatus('set',activityStatus)"
    />
    <!--表格相关 -->
    <el-table
      :data="timeTableData"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column
        prop="vipName"
        min-width="100px"
        label="VIP名称"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        min-width="140px"
        label="累计消费（R）区间"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.minRecharge }}-{{ scope.row.maxRecharge }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" label="头像" align="center">
        <template slot-scope="scope">
          <KImage
            :imagevalue="scope.row.vipIcon"
            width-item="50px"
            height-item="50px"
            pathType="1"
          />
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        label="特权"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              :disabled="!authorityHandle(429)"
              class="table-btn"
              :value="getVipType(scope.row.vipType)"
              @click.native="clickToEdit(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              :disabled="!authorityHandle(429)"
              class="table-btn"
              value="查看/修改"
              @click.native="updateRedDialog(scope.row)"
            />
            <k-button
              class="table-btn"
              value="删除"
              :disabled="!authorityHandle(429)"
              @click.native="deleteRedItem(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 流水返利 弹窗 -->
    <k-dialog
      :show-hide.sync="flowRebate.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="流水返利"
      class-name="ruleGuide-dialog"
      :twoBtn="true"
      :show-foot="false"
      @click="flowRebateBtn"
    >
      <div class="dialog-ruleGuide" style="padding: 30px">
        <span>昨日消耗*</span
        ><el-input
          v-model="flowRebate.vipDetail"
          placeholder="请输入"
          style="width: 300px"
        ></el-input
        ><span>%</span>
      </div>
    </k-dialog>
    <!-- 新建vip 弹窗 -->
    <k-dialog
      :show-hide.sync="creatRigisterRedPock.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="dialogTitle"
      class-name="creatRigisterRedPock_dialog"
      :show-foot="false"
      :twoBtn="true"
      @click="saveRegisterRedPock"
    >
      <div class="dialog_creatRigisterRedPock">
        <el-form :model="registerInfo" label-width="auto">
          <el-form-item label="VIP名称：">
            <el-input
              v-model="registerInfo.vipName"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="累计消费（R）:">
            <el-input
              v-model="registerInfo.minRecharge"
              class="red_money_small"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              placeholder="输入数值"
            />
            <i style="margin: 0 3px"> — </i>
            <el-input
              v-model="registerInfo.maxRecharge"
              class="red_money_small"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              placeholder="输入数值"
            />
          </el-form-item>
          <el-form-item label="头像框：" prop="iconUrl">
            <k-upload-file
              ref="upload1"
              v-model="registerInfo.vipIcon"
              upload-style="img"
              @successUpload="successUpload($event)"
            />
            <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
          </el-form-item>
          <el-form-item label="特权选择：">
            <div class="chargeform">
              <el-select
                v-model="registerInfo.vipType"
                placeholder="请选择"
                class="red_money"
              >
                <el-option label="流水返利" :value="1" />
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>
  <script>
import {
  vipListData,
  vipSaveData,
  vipDeleteData,
  vipGetStatus,
  vipSetStatus
} from "@/api/red/data";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  data() {
    return {
      giveType: 1,
      redMoneyFlag: false,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
        },
      },
      timeTableData: [],
      registerInfo: {
        vipName: "", // vip名称",
        minRecharge: "", // 红包个数",
        maxRecharge: "", // 红包个数",
        vipType: "", // 领取方式",
        vipIcon: "", // 头像框
      },

      creatRigisterRedPock: {
        showHide: false,
      },
      flowRebate: {
        showHide: false,
        vipDetail: "",
        row: {},
      },
      activityStatus: false,
      dialogTitle:''// vip弹窗标题
    };
  },
  watch: {},
  created() {
    this.loadData();
    this.updateActStatus('get')
  },
  computed: {},
  methods: {
    getVipType(val) {
      if (val == "1") return "流水返利";
    },
    // 控制页面开关
    async updateActStatus(type,val) {
      if(type==='get'){
        const res = await vipGetStatus()
        if(res.status === 200) this.activityStatus = res.data || false
      }else{
        const res = await vipSetStatus({status:this.activityStatus})
        if(res.status === 200)  this.$message.success("操作成功!");
        
      }
      
    },
    clickToEdit(row) {
      this.flowRebate.showHide = true;
      this.flowRebate.row = row;
      this.flowRebate.vipDetail = row.vipDetail || ''
    },
    async flowRebateBtn() {
      try {
        const res = await vipSaveData({id:this.flowRebate.row.id,vipDetail:this.flowRebate.vipDetail})
        if(res.status === 200){
           this.loadData();
           this.updateActStatus('get')
           this.flowRebate.showHide = false;
           this.$message.success("操作成功!");
        }
      } catch (error) {
        // 异常处理代码
        console.log('发生了一个错误：', error.message);
      }
    },
    successUpload(data, flag) {
      this.registerInfo.vipIcon = data;
    },
    loadData() {
      vipListData(this.listQuery).then((res) => {
        // this.totalRows = res.data.totalRows;
        this.timeTableData = res.data;
      });
    },
    radioChange(v) {
      this.redMoneyFlag = v !== 1;
    },
    creatRedPocketDialog() {
      this.dialogTitle = '创建VIP';
      this.registerInfo = {
        vipName: "", // vip名称",
        minRecharge: "", // 红包个数",
        maxRecharge: "", // 红包个数",
        vipType: "", // 领取方式",
        vipIcon: "", // 头像框
      },
      this.creatRigisterRedPock.showHide = true;
    },
    updateRedDialog(row) {
      this.dialogTitle = '修改VIP'
      this.creatRigisterRedPock.showHide = true;
      this.registerInfo = row;
      this.giveType = row.giveType;
      this.radioChange(this.giveType);
    },
    // 保存红包
    saveRegisterRedPock() {
    this.registerInfo.giveType = this.giveType;
     let s = Object.values(this.registerInfo).some(value => !value);
     if(s) this.$message.success("请输入完整!");
      vipSaveData(this.registerInfo).then((res) => {
        if (res.status == 200) {
          this.$message.success("保存成功");
          this.$resetForm(this.registerInfo);
          this.loadData();
        } else {
          this.$message.success(res.data.msg);
        }
      });
      this.creatRigisterRedPock.showHide = false;
    },
    deleteRedItem(row) {
      this.$confirm("确定删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          vipDeleteData({ id: row.id }).then((res) => {
            if (res.status == 200) {
              this.$message.success("删除成功");
              this.loadData();
            } else {
              this.$message.success(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
  <style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
::v-deep .el-radio__label {
  display: none;
}
.span_cloum {
  &.active {
    color: #3b425d;
  }
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }
  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }
  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }
  .room-type,
  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
.red_money {
  width: 200px;
}

.red_money_small {
  width: 100px;
}
.radio_group {
  margin-left: 30px;
}
.grid-div {
  display: grid;
  grid-template-columns: repeat(7, 120px);
  .item {
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #e3e2e7;
    width: 120px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
  }
}
.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
  &:nth-of-type(2) {
    margin-left: 10px;
  }
}
.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}
.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.dialog_creatRigisterRedPock {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 180px;
  ::v-deep .el-select .el-select__tags > span {
    display: none;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}

.form-modify {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 10px 80px;
}

.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 270px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}
.chargeform {
  display: flex;
  flex-direction: row;
  width: 300px;
}

::v-deep .el-switch__label.is-active {
  color: $mainColor;
}

.addBox_dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  ::v-deep .el-dialog__body {
    width: 678px;
    margin: 40px 80px;
  }
  ::v-deep .el-select .el-select__tags > span {
    display: none;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}
.cell-baby {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ellipsis-span {
  width: 80px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
  